<template>
<div>
  <el-tag effect="dark" class="my-tag">
    <svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
      <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01"></path>
      <path
        d="M682.666667 204.8h238.933333a34.133333 34.133333 0 0 1 34.133333 34.133333v648.533334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V204.8z"
        fill="#FFAA44"></path>
      <path
        d="M68.266667 921.6a34.133333 34.133333 0 0 0 34.133333 34.133333h785.066667a68.266667 68.266667 0 0 1-68.266667-68.266666V102.4a34.133333 34.133333 0 0 0-34.133333-34.133333H102.4a34.133333 34.133333 0 0 0-34.133333 34.133333v819.2z"
        fill="#11AA66"></path>
      <path
        d="M238.933333 307.2a34.133333 34.133333 0 0 0 0 68.266667h136.533334a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h409.6a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h204.8a34.133333 34.133333 0 1 0 0-68.266667H238.933333z"
        fill="#FFFFFF"></path>
    </svg>
    歌曲信息
  </el-tag>
  <el-form :model="music" :rules="rules" ref="ruleForm" label-width="150px"
           class="demo-ruleForm">
    <el-form-item label="歌曲名称" prop="name">
      <el-input maxlength="30" v-model="music.name"></el-input>
    </el-form-item>

    <el-form-item label="歌手" prop="artist">
      <el-input maxlength="50" v-model="music.artist"></el-input>
    </el-form-item>

    <el-form-item label="歌手类型" prop="artistType">
      <el-select v-model="music.artistType" placeholder="请选择歌手类型">
        <el-option
          v-for="item in artistTypes"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="歌曲文件" prop="articleCover">
        <el-input v-model="music.filePath"></el-input>
    </el-form-item>
    <el-form-item>
      <el-upload
        class="upload-demo"
        drag
        action="http://localhost:8081/upload/musicFile"
        :on-change="handleFileChange"
        :auto-upload="true"
        :on-success="handleUploadSuccess" >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</div>
</template>


<script>
export default {
  data() {
    return {
      music: {
        id: this.$route.query.id,
        name: '',
        artist: '',
        filePath: '',
        artistType: null,
      },
      artistTypes: [
        {id: 0, name: '华语男歌手'},
        {id: 1, name: '华语女歌手'},
        {id: 2, name: '中国组合'},
        {id: 3, name: '日韩男歌手'},
        {id: 4, name: '日韩女歌手'},
        {id: 5, name: '欧美歌手'},
        {id: 6, name: '外国组合'}
      ],
      rules: {
        name: [
          {required: true, message: '请输入歌名', trigger: 'blur'}
        ],
        artist: [
          {required: true, message: '请输入歌手名', trigger: 'blur'}
        ],
        artistType: [
          {required: true, message: '请选择歌手类型', trigger: 'change'}
        ],
        filePath: [
          {required: true, message: '请上传歌曲文件', trigger: 'change'}
        ]
      }
    }
  },
  created() {
    this.getMusic();
  },
  methods: {
    getMusic() {
      if (this.$route.query.id != null) {
        this.$http.get(this.$constant.baseURL + "/play/getMusicById", {id: this.$route.query.id}, true)
          .then(res => {
            if (res && res.data) {
              this.music = res.data;
            }
          })
      }
    },
    handleFileChange(file, fileList) {
      this.$message.success('正在上传文件')
    },
    handleUploadSuccess(response, file, fileList) {
      const fileName = file.name;
      const baseName = fileName.substring(0, fileName.lastIndexOf('.'));
      // 根据文件名规则解析出歌曲名和歌手名
      const [songName, artistName] = baseName.split('-').map(s => s.trim());
      this.music.name = songName;
      this.music.artist = artistName;

      // 可以在这里添加更多的逻辑，比如验证文件名格式是否正确
      if (!songName || !artistName) {
        this.$message.error('文件名格式不正确，请检查文件名');
        return;
      }
      if (response && response.data) {
        this.music.filePath = response.data;
      } else {
        console.error('上传失败或响应格式不正确');
      }
      // 显示成功消息
      this.$message.success('文件名自动解析成功');
    },
    submitForm() {
      this.$http.post(this.$constant.baseURL + "/play/saveMusic" , this.music, true)
        .then(res => {
          if (res && res.code === 200) {
            this.$message.success("保存成功")
            this.$router.push({path: '/musicList'})
          } else {
            this.$message.error("保存失败")
          }
        })
    }
  }

}


</script>


<style>
.my-tag {
  margin-bottom: 20px;
  width: 100%;
  text-align: left;
  background: var(--lightYellow);
  border: none;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  color: var(--black);
}
</style>
